<template>
    <transition name="fade">
        <div :class="classes" :style="outerStyles" v-show="show">
            <div :class="innerClasses" :style="styles"></div>
        </div>
    </transition>
</template>

<script>
import { prefixCls } from '../prefix'
import './loading-bar.css'

export default {
    name: `${prefixCls}LoadingBar`,
    props: {
        color: {
            type: String,
            default: 'primary'
        },
        failedColor: {
            type: String,
            default: 'error'
        },
        height: {
            type: Number,
            default: 2
        }
    },
    computed: {
        classes() {
            return `${prefixCls}-loading-bar`
        },
        innerClasses() {
            return [
                `${prefixCls}-loading-bar-inner`,
                {
                    [`${prefixCls}-loading-bar-inner-color-primary`]: this.color === 'primary' && this.status === 'success',
                    [`${prefixCls}-loading-bar-inner-failed-color-error`]: this.failedColor === 'error' && this.status === 'error'
                }
            ];
        },
        outerStyles() {
            return {
                height: `${this.height}px`
            };
        },
        styles() {
            let style = {
                width: `${this.percent}%`,
                height: `${this.height}px`
            };

            if (this.color !== 'primary' && this.status === 'success') {
                style.backgroundColor = this.color;
            }

            if (this.failedColor !== 'error' && this.status === 'error') {
                style.backgroundColor = this.failedColor;
            }

            return style;
        }
    },
    data() {
        return {
            percent: 0,
            status: 'success',
            show: false
        }
    }
}
</script>